<template>
  <a-modal
    title="编辑"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item
        label="类型名称"
        :labelCol="{lg: {span: 5}, sm: {span: 3}}"
        :wrapperCol="{lg: {span: 12}, sm: {span: 21} }">
        <a-input
          v-decorator="[
            'name',
            {rules: [{ required: true, message: '请输入类型名称' },{max:8, message: '类型名称最多8个字符' }]}
          ]"
          name="name"
          placeholder="请输入类型名称" />
      </a-form-item>
      <a-form-item
        label="排序"
        :labelCol="{lg: {span: 5}, sm: {span: 3}}"
        :wrapperCol="{lg: {span: 12}, sm: {span: 21} }">
        <a-input
          v-decorator="[
            'seqNum',
            {rules: [{ required: true, message: '请输入排序序号' }]}
          ]"
          name="seqNum"
          placeholder="请输入排序序号" />
      </a-form-item>
      <a-form-item
        label="状态"
        :labelCol="{lg: {span: 5}, sm: {span: 3}}"
        :wrapperCol="{lg: {span: 12}, sm: {span: 21} }">
        <a-radio-group
          v-decorator="[
            'enabled',
            {rules: [{ required: true, message: '请选择状态' }]}
          ]"
          name="enabled">
          <a-radio :value="true">上线</a-radio>
          <a-radio :value="false">下线</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        v-if="!$route.params.id"
        label="图标"
        :labelCol="{lg: {span: 5}, sm: {span: 3}}"
        :wrapperCol="{lg: {span: 12}, sm: {span: 21} }">
        <upload-image
          :imageUrl="iconUrl"
          :imageType="1"
          @uploadImage="uploadImage"
          v-decorator="[
            'iconUrl',
            {
              rules: [{ required: true, message: '请上传图片' }],
            },
          ]"
        ></upload-image>
      </a-form-item>
      <a-form-item
        label="描述"
        :labelCol="{lg: {span: 5}, sm: {span: 3}}"
        :wrapperCol="{lg: {span: 12}, sm: {span: 21} }">
        <a-textarea
          rows="4"
          placeholder="请输入描述内容"
          v-decorator="[
            'remark',
            {rules: [{ required: true, message: '请输入描述内容' }]}
          ]" />
      </a-form-item>
    </a-form>
    <template slot="footer">
      <a-button key="cancel" @click="handleCancel">取消</a-button>
      <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext()">保存</a-button>
    </template>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import UploadImage from '@/viewsVue/commit/UploadImage'
import { mapActions } from 'vuex'
export default {
  name: 'EditModal',
  components: {
    UploadImage
  },
  data () {
    return {
      iconUrl: '',
      id: '',
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    ...mapActions(['TypeEdit']),
    edit (record) {
      this.visible = true
      var self = this
      this.$nextTick(() => {
        const { form: { setFieldsValue } } = this
        self.id = record.id || ''
        setFieldsValue(pick(record, []))
        if (!this.$route.params.id) {
          if (record && record.iconUrl) {
            self.iconUrl = record.iconUrl
            setFieldsValue({
              iconUrl: record.iconUrl || ''
            })
          }
        }
        self.form.setFieldsValue({
          name: record.name || '',
          seqNum: record.seqNum || '',
          enabled: record.enabled || true,
          remark: record.remark || ''
        })
      })
    },
    uploadImage (val) { // 图片上传成功显示
      this.iconUrl = val.img
      this.$nextTick(() => {
        this.form.setFieldsValue({ 'iconUrl': val.img })
      })
    },
    handleNext () {
      const { form: { validateFields } } = this
      // last step
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          this.TypeEdit({
            id: this.id,
            name: values.name,
            iconUrl: values.iconUrl || '',
            enabled: values.enabled,
            remark: values.remark,
            seqNum: values.seqNum
          })
            .then((res) => this.submitSuccess(res))
            .catch(err => this.requestFailed(err))
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.visible = false
    },
    submitSuccess (res) {
      if (res.status === 200 || res.status === '200') {
        this.$notification['success']({
          message: '成功',
          description: res.message,
          duration: 4
        })
        setTimeout(() => {
          this.confirmLoading = false
          this.visible = false
          this.$emit('ok', res)
        }, 1000)
      } else {
        this.requestFailed(res)
      }
    },
    requestFailed (err) {
      this.$notification['error']({
        message: '错误',
        description: err.message || '请求出现错误，请稍后再试',
        duration: 4
      })
      setTimeout(() => {
        this.confirmLoading = false
      }, 1000)
    }
  }
}
</script>
